<template>
  <div class="app-container">
    <!-- 添加或修改工单类型对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body v-drag-fullscreen>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="类型代码" prop="typeCode">
          <el-input v-model="form.typeCode" :disabled="optionType!='ADD'" placeholder="请输入类型代码"/>
        </el-form-item>
        <el-form-item label="类型名称" prop="typeName">
          <el-input v-model="form.typeName" placeholder="请输入类型名称" :disabled="disabled"/>
        </el-form-item>
        <el-form-item label="图标">
          <el-row>
            <el-col :span="20">
              <el-popover
                placement="bottom-start"
                width="460"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="selected"/>
                <el-input slot="reference" v-model="form.typeIcon" placeholder="点击选择图标" readonly>
                  <svg-icon
                    v-if="form.icon"
                    slot="prefix"
                    :icon-class="form.icon"
                    class="el-input__icon"
                    style="height: 32px;width: 16px;"
                  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
                </el-input>
              </el-popover>
            </el-col>
            <el-col :span="4">
              <el-color-picker v-model="form.background" show-alpha size="small" :predefine="colors"></el-color-picker>
            </el-col>
          </el-row>

        </el-form-item>

        <el-form-item label="是否回访">
          <el-radio-group v-model="form.whereVisit" :disabled="disabled">
            <el-radio
              v-for="item in dict.sys_yes_no"
              :key="item.dictValue"
              :label="item.dictValue"
            >{{item.dictLabel}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关联表单" prop="associationForm">
          <el-select v-model="form.associationForm" placeholder="请输入关联表单" :disabled="disabled">
            <el-option
              v-for="item in dict.association_form"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联回单" prop="associationReceipt">
          <el-select v-model="form.associationReceipt" placeholder="请输入关联回单" :disabled="disabled">
            <el-option
              v-for="item in dict.association_receipt"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :disabled="disabled"/>
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input v-model="form.orderNum" placeholder="请输入关联回单" :disabled="disabled"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getWorkOrderType, addWorkOrderType, updateWorkOrderType} from "@/api/workorder/workOrderType";
  import IconSelect from "@/components/common/IconSelect";

  export default {
    name: "WorkOrderTypeFrom",
    components: {IconSelect},
    dicts: ['sys_yes_no','association_form','association_receipt'],
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //是否禁用
        disabled: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          typeCode: [
            {required: true, message: "类型代码不能为空", trigger: "blur"}
          ],
          typeName: [
            {required: true, message: "类型名称不能为空", trigger: "blur"}
          ],
          associationForm: [
            {required: true, message: "关联表单不能为空", trigger: "blur"}
          ],
          associationReceipt: [
            {required: true, message: "关联回单不能为空", trigger: "blur"}
          ],
        },
        optionType: '',
        colors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ],
      };
    },
    created() {

    },
    methods: {
      show(option) {
        this.reset();
        this.optionType = option.type
        this.disabled = option.type == 'VIEW'
        if (option.type == 'ADD') {
          this.open = true;
          this.title = "新增工单类型";
        } else if (option.type == 'UPDATE' || option.type == 'VIEW') {
          getWorkOrderType(option.id).then(response => {
            this.form = response.data;

            if (option.type == 'VIEW') {
              this.title = "查看工单类型";
            } else {
              this.title = "修改工单类型";
            }
            this.open = true;
          });
        }
      },
      // 选择图标
      selected(name) {
        this.form.typeIcon = name;
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          typeCode: null,
          typeName: null,
          typeIcon: null,
          whereVisit: "Y",
          background:null,
          associationForm: null,
          associationReceipt: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          orderNum:0
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateWorkOrderType(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.cancel()
              });
            } else {
              addWorkOrderType(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.cancel()
              });
            }
          }
        });
      }
    }
  };
</script>
